import React, { useMemo } from 'react'
import { useRecoilValue } from 'recoil'
import { Select } from 'antd'
import styles from './index.module.less'
import { contextForWard } from '../../_context'
import useHooks from '../../hooks/ward'
import WardTable from '../WardTableList'
import { userInfo } from '@/store/userInfo'

export default () => {
  const selfHooks = useHooks()
  const user = useRecoilValue(userInfo)
  const { years, curYears, setCurYears } = selfHooks
  const yearOptions = useMemo(
    () =>
      years.map((item) => (
        <Select.Option key={item.dataReportYear} value={item.dataReportYear}>
          {item.dataReportYear}
        </Select.Option>
      )),
    [years],
  )
  return (
    <contextForWard.Provider value={selfHooks}>
      <div className={styles.wardWrapper}>
        <div className={styles.header}>{user.wardName}</div>
        <Select
          value={curYears}
          onSelect={(e) => setCurYears(e)}
          placeholder='请选择年度'
          style={{ width: '240px', marginBottom: '29px' }}
        >
          {yearOptions}
        </Select>
        <WardTable />
      </div>
    </contextForWard.Provider>
  )
}
